<template>
	<view>
		<view class="qrcode">
			<canvas canvas-id="qrcode" style="width: 150px;height: 150px; margin: 0 auto;" />
		</view>
		<view class="title">
			{{title}}
		</view>
	</view>
</template>

<script>
	import uQRCode from './weapp-qrcode.js' //引入uqrcode.js
	export default {
		emits: ['clickLoadMore'],
		props: {
			title: {
				type: String,
				default: '生成二维码'
			},
			text: {
				type: String,
				default: '今天要发工资啦'
			},
			size: {
				type: Number,
				default: 150
			},
			margin: {
				type: Number,
				default: 0
			},
			foregroundColor: {
				type: String,
				default: '#000000'
			},
			backgroundColor: {
				type: String,
				default: "#FFFFFF"
			},
			errorCorrectLevel: {
				type: Number,
				default: uQRCode.errorCorrectLevel.H
			},
			fileType: {
				type: String,
				default: "jpg"
			},
		},
		data() {
			return {}
		},

		mounted() {
			this.couponQrCode()
		},
		methods: {
			// 二维码生成工具
			couponQrCode() {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.text,
					size: this.size,
					margin: this.margin,
					backgroundColor: this.backgroundColor,
					foregroundColor: this.foregroundColor,
					fileType: this.fileType,
					errorCorrectLevel: this.errorCorrectLevel,
					success: res => {}
				})

			},
			onClick() {
				this.$emit('clickLoadMore', {
					detail: {
						status: this.status,
					}
				})
			}
		}
	}
</script>

<style>
	.qrcode {
		padding: 50upx 0 20upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		text-align: center;
	}
</style>
